<template>
	<view class="complaint-container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">投诉反馈</text>
			<text class="subtitle">您的反馈是我们改进的动力</text>
		</view>

		<!-- 表单区域 -->
		<form @submit="submitForm">

			<!-- 投诉内容 -->
			<view class="form-item">
				<text class="label">投诉内容</text>
				<textarea class="textarea" placeholder="请详细描述您遇到的问题..." v-model="formData.complaint_feedback_content"
					maxlength="500" placeholder-style="color:#CCCCCC;"></textarea>
				<view class="word-count">{{ formData.complaint_feedback_content.length }}/500</view>
			</view>
			<!-- 联系方式 -->
			<view class="form-item">
				<text class="label">联系方式（选填）</text>
				<input class="input" type="text" placeholder="请留下您的手机号或邮箱" v-model="formData.complaint_feedback_phone"
					placeholder-style="color:#CCCCCC;" />
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn" form-type="submit" :disabled="isSubmitting" :loading="isSubmitting">
				{{ isSubmitting ? '提交中...' : '提交反馈' }}
			</button>
		</form>

		<!-- 提交成功提示 -->
		<uni-popup ref="popup" type="message">
			<uni-popup-message type="success" :message="submitResult" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		user_complaintFeedbackSave
	} from '@/api/login';
	export default {
		// components: {
		//   uniIcons,
		//   uniPopup,
		//   uniPopupMessage
		// },
		data() {
			return {
				selectedType: {},
				imageList: [],
				formData: {
					complaint_feedback_content: '',
					complaint_feedback_phone: ''
				},
				isSubmitting: false,
				submitResult: '提交成功！感谢您的反馈'
			}
		},
		methods: {

			// 提交表单
			async submitForm(e) {

				if (!this.formData.complaint_feedback_content.trim()) {
					uni.showToast({
						title: '请填写投诉内容',
						icon: 'none'
					})
					return
				}

				this.isSubmitting = true

				try {
					const data = await user_complaintFeedbackSave({
						complaint_feedback_content: this.formData.complaint_feedback_content,
						complaint_feedback_phone: this.formData.complaint_feedback_phone
					})
					if (data.code == 200) {
						uni.showToast({
							title: "反馈成功",
							icon: 'none'
						})
						uni.navigateBack()
					}

				} catch (error) {

				} finally {}
			},

			// 重置表单
			resetForm() {
				this.selectedType = {}
				this.formData = {
					complaint_feedback_content: '',
					complaint_feedback_phone: ''
				}
				this.imageList = []
			}
		}
	}
</script>

<style lang="scss" scoped>
	.complaint-container {
		padding: 20rpx 30rpx 40rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.header {
		margin-bottom: 40rpx;

		.title {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 10rpx;
		}

		.subtitle {
			font-size: 26rpx;
			color: #999;
		}
	}

	.form-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.03);

		.label {
			font-size: 28rpx;
			color: #333;
			display: block;
			margin-bottom: 20rpx;
		}
	}

	.picker {
		.picker-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			color: #666;
			font-size: 28rpx;
		}
	}

	.textarea {
		width: 100%;
		height: 200rpx;
		font-size: 28rpx;
		color: #333;
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
	}

	.word-count {
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 10rpx;
	}

	.upload-area {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;

		.upload-item,
		.upload-btn {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
		}

		.upload-image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}

		.delete-icon {
			position: absolute;
			right: -10rpx;
			top: -10rpx;
			background-color: #fff;
			border-radius: 50%;
			padding: 4rpx;
		}

		.upload-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 2rpx dashed #ddd;
			border-radius: 8rpx;
			color: #999;

			.upload-text {
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}

	.upload-tip {
		font-size: 24rpx;
		color: #999;
		display: block;
		margin-top: 10rpx;
	}

	.input {
		width: 100%;
		height: 80rpx;
		font-size: 28rpx;
		color: #333;
		padding: 0 20rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
	}

	.submit-btn {
		width: 93%;
		position: fixed;
		bottom: 10px;
		margin-top: 40rpx;
		background-color: #339966;
		color: #fff;
		border-radius: 50rpx;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;

		&[disabled] {
			background-color: #cccccc;
			opacity: 0.8;
		}
	}
</style>